<template>
  <div class="app-container">
    <header class="header">
      <button class="back-button" @click="handleBackClick">返回</button>
      <h1 class="header-title">公众监督上报</h1>
    </header>
    <el-main style="background-color: #f3f4f6" class="main">
      <el-table :data="his" style="width: 409px">
        <el-empty description="description" v-if="!his" />
        <el-table-column type="expand" width="25px">
          <template #default="props">
            <!--下拉详细监督信息-->
            <el-descriptions class="margin-top" :column="1" :size="small" border>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">
                    <el-icon :style="iconStyle">
                      <user />
                    </el-icon>
                    网格员
                  </div>
                </template>
                {{ props.row.member === null ? '暂无' : props.row.member.mname }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item" style="width: 65px">
                    <el-icon :style="iconStyle">
                      <iphone />
                    </el-icon>
                    电话
                  </div>
                </template>
                {{ props.row.member === null ? '暂无' : props.row.member.tel }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">
                    <el-icon :style="iconStyle">
                      <tickets />
                    </el-icon>
                    备注
                  </div>
                </template>
                {{ props.row.remark }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">
                    <el-icon :style="iconStyle">
                      <Location />
                    </el-icon>
                    地址
                  </div>
                </template>
                {{ props.row.faddress }}
              </el-descriptions-item>
            </el-descriptions>

            <!--时间线轴内容-->
            <div style="height: 150px; max-width: 350px">
              <el-timeline style="max-width: 340px">
                <el-timeline-item
                  v-for="(tl, index) in timeline[props.$index].timeLineList"
                  :key="index"
                  :timestamp="this.$formatDate(tl.time, 'YYYY-MM-DD hh:mm:ss')"
                >
                  {{ tl.stateName }}
                </el-timeline-item>
              </el-timeline>
            </div>
          </template>
        </el-table-column>
        <!--展示列2-->
        <el-table-column label="上报时间" prop="createtime" width="110px">
          <template #default="item">
            {{ this.$formatDate(item.row.createtime, 'YYYY-MM-DD hh:mm:ss') }}</template
          ></el-table-column
        >
        <!--展示列3-->
        <el-table-column label="预估AQI" prop="aid" width="130px">
          <template #default="item">
            <el-tag> {{ item.row.aid }}</el-tag>
            <el-tag
              :style="{ backgroundColor: item.row.color }"
              style="color: white; font-weight: bold"
              >{{ item.row.aqiExpln }}</el-tag
            >
          </template></el-table-column
        >
        <el-table-column label="结果">
          <template #default="item">
            <el-button
              style="margin-right: 16px"
              :disabled="item.row.state !== 2"
              @click="publics.showResult(item.$index)"
            >
              查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog v-model="dialogShow" title="反馈结果" style="width: 410px">
        <el-descriptions :column="1" border>
          <el-descriptions-item label="结果更新时间" label-align="right" align="center">
            {{ this.$formatDate(curLog.updatetime, 'YYYY-MM-DD hh:mm:ss') }}
          </el-descriptions-item>
          <el-descriptions-item
            label="二氧化硫"
            label-align="right"
            align="center"
            style="justify-content: center; display: flex; flex-direction: column"
          >
            <el-tag size="small"> {{ curInfo.so2level }}级</el-tag
            ><el-text>{{ curInfo.so2value }} μg/m³ </el-text>
          </el-descriptions-item>
          <el-descriptions-item
            label="一氧化碳"
            label-align="right"
            align="center"
            style="justify-content: center; display: flex; flex-direction: column"
          >
            <el-tag size="small"> {{ curInfo.colevel }}级</el-tag>
            <el-text>{{ curInfo.covalue }} mg/m³</el-text>
          </el-descriptions-item>
          <el-descriptions-item
            label="空气悬浮物"
            label-align="right"
            align="center"
            style="display: flex"
          >
            <el-tag size="small"> {{ curInfo.spmlevel }}级</el-tag
            ><el-text>{{ curInfo.spmvalue }} 单位 </el-text>
          </el-descriptions-item>

          <el-descriptions-item
            label="实际AQI"
            label-align="right"
            align="center"
            style="display: flex"
          >
            <el-tag size="small">{{ curInfo.aqilevel }}级</el-tag>
          </el-descriptions-item>
        </el-descriptions>
      </el-dialog>
    </el-main>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import { Iphone, Location, OfficeBuilding, Tickets, User } from '@element-plus/icons-vue'

import { Publics } from '@/stores/public.js'
import { storeToRefs } from 'pinia'
const publics = Publics()

const { his, dialogShow, curInfo, curLog, timeline } = storeToRefs(publics)

onMounted(() => {
  publics.loadData()
})

const handleBackClick = () => {
  // 跳转回上一页
  publics.goback()
}
</script>

<style lang="scss" scoped>
/* 样式可以根据需要进行进一步定义 */
.app-container {
  width: 410px;
  height: 640px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  width: 370px;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.back-button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: #007bff;
}

.header-title {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.main {
  flex: 1; /* 填充剩余高度 */
  background-color: #f4f4f5; /* 示例背景色 */
  width: 409px;
}

.el-descriptions {
  margin-top: 20px;
}
.cell-item {
  display: flex;
  align-items: center;
}
.margin-top {
  margin-top: 20px;
}
</style>
